<template>
  <Modal
    class="modal-tips"
    v-model="config"
    @on-cancel="cancel"
    :mask-closable="false"
    footer-hide
    title="修改密码"
  >
    <div class="modal-main" style="position: relative">
      <Spin :withIcon="true" v-if="loading"></Spin>
      <div class="flx-row-s-c item-line">
        <div class="title-name">原密码</div>
        <Input
          v-model.trim="oldPassword"
          type="password"
          placeholder="请输入"
          maxlength="30"
          style="width: 200px"
          @keydown.native="keydown($event)"
        />
      </div>
      <div class="flx-row-s-c item-line">
        <div class="title-name">新密码</div>
        <Input
          v-model.trim="newPassword"
          type="password"
          placeholder="请输入"
          maxlength="16"
          style="width: 200px"
          @keydown.native="keydown($event)"
        />
      </div>
      <div class="flx-row-s-c item-line">
        <div class="title-name">再次输入新密码</div>
        <Input
          v-model.trim="confirmPassword"
          type="password"
          placeholder="请输入"
          maxlength="16"
          style="width: 200px"
          @keydown.native="keydown($event)"
        />
      </div>
      <span class="f-12 mg-b-15 c-r" style="margin-left: 150px"
        >密码至少8个字符，最多16个字符</span
      >
      <div class="flx-row-c-c" style="margin-top: 30px">
        <div
          class="big-button-size user-strong-button"
          style="margin-right: 50px"
          @click="submit"
        >
          确认
        </div>
        <div class="big-button-size user-normal-button" @click="cancel">
          取消
        </div>
      </div>
    </div>
  </Modal>
</template>

<script>
import { updatePwd, getPublicKey } from "@/api/user";
import { validPassword } from "@/utils/validate.js";
import JSEncrypt from "jsencrypt";

export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      // 表单数据
      oldPassword: "",
      newPassword: "",
      confirmPassword: "",
    };
  },
  created() {
    this.getPublicKey();
  },
  methods: {
    async getPublicKey() {
      if (!this.$storage.getPublicKey()) {
        let res = await getPublicKey();
        if (res.code == 200) {
          this.$storage.setPublicKey(res.data);
        }
      }
    },
    getEncrypt(data) {
      let encrypt = new JSEncrypt();
      // 设置公钥
      encrypt.setPublicKey(this.$storage.getPublicKey());
      return encrypt.encrypt(data);
    },
    // 提交表单
    async submit() {
      if (this.oldPassword == null || this.oldPassword == "") {
        this.$Message.warning("请输入原密码！");
        return;
      }
      if (!validPassword(this.newPassword)) {
        this.$Message.warning("请按要求输入新密码！");
        return;
      }
      if (this.confirmPassword == null || this.confirmPassword == "") {
        this.$Message.warning("请再次输入新密码！");
        return;
      }
      if (this.newPassword != this.confirmPassword) {
        this.$Message.warning("两次新密码输入不一致！");
        return;
      }
      this.loading = true;
      let data = {
        oldPassword: this.getEncrypt(this.oldPassword),
        newPassword: this.getEncrypt(this.newPassword),
        confirmPassword: this.getEncrypt(this.confirmPassword),
      };
      let res = await updatePwd(data);
      if (res.code == 200) {
        this.$Message.success("修改成功！");
        this.cancel();
      }
      this.loading = false;
    },
    // 密码输入过滤掉空格和回车
    keydown(event) {
      if (event.keyCode == 32 || event.keyCode == 13) event.returnValue = false;
    },
    cancel() {
      this.config = false;
      this.oldPassword = "";
      this.newPassword = "";
      this.confirmPassword = "";
    },
  },
  computed: {
    config: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.modal-main {
  padding: 30px 40px 50px;

  .item-line {
    margin-bottom: 10px;
  }
  .title-name {
    text-align: right;
    width: 120px;
    margin-right: 30px;
    font-size: 14px;
    line-height: 32px;
    color: #000;
    &::after {
      content: ":";
    }
  }
}
</style>